<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">团购商品</h3>
    <el-form :model="sheTuanForm" class="label-black" ref="sheTuanForm" label-width="76px">
      <div class="set-part mt20">
        <div class="class_box">
          <el-form-item label="列表样式" prop="style.listStyle">
            <div class="val-show">{{sheTuanForm.style.listStyle == 'row_one' ? '样式一' : '样式二'}}</div>
          </el-form-item>
          <div class="brother_row" style="margin-top: -10px;margin-bottom: 20px;">
            <el-radio-group v-model="sheTuanForm.style.listStyle">
              <el-radio v-for="(item,index) in listStyleOption" :key="index" :label="item.label" :value="item.value"><i :class="item.icon"></i></el-radio>
              <!-- <el-radio :label="row_tow"><icon class="fonticon-good-style2"></icon></el-radio> -->
            </el-radio-group>
            <!-- <en-radio-tab
              :optionsData="listStyleOption"
              :defaultData="sheTuanForm.style.listStyle"
              v-model="sheTuanForm.style.listStyle">
            </en-radio-tab> -->
          </div>
        </div>
        <el-form-item label="商品标签" prop="style.showTag">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showTag?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showTag"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品卖点" prop="style.showSell">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showSell?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showSell"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="划线价" prop="style.showScribing">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showScribing?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showScribing"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品限购" prop="style.showLimit">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showLimit?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showLimit"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="累计销量" prop="style.showCumulative">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showCumulative?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showCumulative" :disabled="sheTuanForm.style.textAlign==='center'"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="购买记录" prop="style.showRecord">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showRecord?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showRecord" :disabled="sheTuanForm.style.textAlign==='center'"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="库存剩余" prop="style.showStock">
          <div class="flex">
            <div class="val-show flex-1">{{sheTuanForm.style.showStock?'显示':'不显示'}}</div>
            <el-checkbox v-model="sheTuanForm.style.showStock" :disabled="sheTuanForm.style.textAlign==='center'"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品边距" prop="style.pageMargin">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="sheTuanForm.style.pageMargin"></el-slider>
            <el-input class="row-input" v-model.number="sheTuanForm.style.pageMargin"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="商品间距" prop="style.proPadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="sheTuanForm.style.proPadding"></el-slider>
            <el-input class="row-input" v-model.number="sheTuanForm.style.proPadding"></el-input>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">提交预览</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin';
  let defaultForm = {
    style: {
      listStyle: 'row_one', // 列表样式
      showTag: true, // 商品标签
      showSell: true, // 商品卖点
      showScribing: true, // 划线价
      showLimit: true, // 商品限购
      showCumulative: true, // 累计销量
      showRecord: true, // 购买记录
      showStock: true, // 库存剩余
      pageMargin: 10, // 页面边距
      proPadding: 10 // 商品间距
    }
  };
  export default {
    name: 'EnSheTuanPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        sheTuanForm: JSON.parse(JSON.stringify(defaultForm)),
        listStyleOption: [{
          value: 'row_one',
          label: 'row_one',
          icon: 'fonticon-good-style1'
        },{
          value: 'row_two',
          label: 'row_two',
          icon: 'fonticon-good-style2'
        }]
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        this.sheTuanForm = JSON.parse(JSON.stringify(defaultForm));
        let { data, style } = JSON.parse(JSON.stringify(newVal));
        this.$nextTick(() => {
          if(data){
            this.sheTuanForm.data = data;
          }
          if(style){
            this.sheTuanForm.style = style;
          }
        });
      }
    },
    methods: {
      /**
        * @date 2020/12/07
        * @author kaiqiang
        * @description { 数据提交 }
      */
      handleConfirm() {
        this.$refs['sheTuanForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.MixinClone(this.sheTuanForm));
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .list_part {
  margin-left: -20px;
  margin-right: -20px;
  padding: 5px 15px;
  overflow: hidden;
  background: #f2f2f2;
  .goods_box {
    .goods_list {
      float: left;
      list-style: none;
      padding-left: 0;
      margin: 0;
      &::before,
      &::after {
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
      }
    }
    .goods_item,
    .add-goods {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: relative;
      float: left;
      margin: 5px 10px 5px 0;
      width: 65px;
      height: 65px;
      border: solid 1px #e6e6e6;
      box-sizing: border-box;
      cursor: pointer;
      background: #fff;
      color: #3870EA;
      font-size: 18px;
      font-weight: 700;
    }
    .goods_pic {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
    .goods_delete {
      position: absolute;
      top: -8px;
      right: -8px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      cursor: pointer;
      background: #CACACA;
      color: #fff;
      font-size: 14px;
    }
  }
}
.class_box {
  padding-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: solid 1px #e6e6e6;
}
</style>
